<!--
 * @Autor: Wei
 * @Date: 2020-04-16 14:31:09
 * @LastEditors: Wei
 * @LastEditTime: 2020-07-09 11:52:07
 -->
<template>
  <div id="app">
    <div class="heardBox" v-if="userInfo">
      <div class="nav">
        <div class="logo"></div>
        <ul>
          <li @click="navigationSelect('/home')" :class="{ selectHeadNav: isSelect == '/home' }">首页</li>
          <li
            @click="navigationSelect('/zhuhaiPortCircle')"
            :class="{ selectHeadNav: isSelect == '/zhuhaiPortCircle' }"
          >珠海港圈</li>
          <li
            @click="navigationSelect('/help')"
            :class="{ selectHeadNav: isSelect == '/help' }"
          >互帮互助</li>
          <li
            @click="navigationSelect('/proposal')"
            :class="{ selectHeadNav: isSelect == '/proposal' }"
          >创新建议</li>
          <li
            @click="navigationSelect('/workVoting')"
            :class="{ selectHeadNav: isSelect == '/workVoting' }"
          >工作投票</li>
          <li
            @click="navigationSelect('/resourceSharing')"
            :class="{ selectHeadNav: isSelect == '/resourceSharing' }"
          >资源共享</li>
          <li
            @click="navigationSelect('/personalCenter')"
            :class="{ selectHeadNav: isSelect == '/personalCenter' }"
          >个人中心</li>
        </ul>
        <div class="search">
          <el-input placeholder="请输入内容" clearable v-model="input"></el-input>
          <el-button size="small" class="searchBtn" @click="toSearch">搜索</el-button>
        </div>
        <div class="LoginBtn" v-if="!userInfo">
          <el-tooltip content="这是用户名称" placement="bottom" effect="light">
            <div class="headimg">
              <el-avatar
                size="medium"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              ></el-avatar>
            </div>
          </el-tooltip>

          <div class="login" @click.stop="goLogin">登录</div>
          <div class="register" @click.stop="goRegister">注册</div>
        </div>
        <div class="LoginBtn" v-if="userInfo">
          <el-tooltip :content="userInfo.name" placement="bottom" effect="light">
            <div class="headimg">
              <el-avatar size="medium" :src="defaultAvatarURL + userInfo.head_portrait"></el-avatar>
            </div>
          </el-tooltip>

          <div class="register" @click="outLogin">退出登录</div>
        </div>
      </div>
    </div>
    <div class="mainBox">
      <!-- <router-view /> -->
      <router-view v-if="!$route.meta.keepAlive"></router-view>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { defaultAvatarURL } from "./utils/global";
import { delect_localUserInfo } from "./common/localStorageAPI";
export default {
  data() {
    return {
      input: "",
      isSelect: "/",
      defaultAvatarURL: defaultAvatarURL
    };
  },
  watch: {
    $route() {
      this.isSelect = this.$route.path;
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    navigationSelect(path) {
      this.isSelect = path;
      this.$router.push(path);
    },
    goLogin() {
      // console.log("router", this.$route.fullPath);

      this.$router.push("/login");
      // this.$router.push({
      //   path: "/register",
      //   query: { fullPath: this.$route.fullPath }
      // });
    },
    goRegister() {
      this.$router.push("/register");
    },
    toSearch() {
      let queryData = this.input;
      this.input = "";
      this.$router.push({
        path: "/search",
        query: {
          input: queryData
        }
      });
    },
    outLogin() {
      this.$store.commit("SET_USERINFO", "");
      this.$store.commit("SET_TOKEN", "");
      delect_localUserInfo();
      this.$message({
        showClose: true,
        message: "已退出登录",
        type: "success"
      });
      this.$router.replace("/");
      window.location.reload();
    }
  }
};
</script>

<style lang="scss">
@import "~quill/dist/quill.core.css";

@import "~quill/dist/quill.snow.css";

@import "~quill/dist/quill.bubble.css";
html,
body,
#app {
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-user-select: text;
}

$navHeight: 60px;

body {
  overflow: auto;
  background: #f6f9fc;
  &::-webkit-scrollbar-track-piece {
    //滚动条凹槽的颜色，还可以设置边框属性
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar {
    //滚动条的宽度
    width: 9px;
    height: 9px;
  }
  &::-webkit-scrollbar-thumb {
    //滚动条的设置
    background-color: #dddddd;
    background-clip: padding-box;
    min-height: 28px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
  }
}

#app {
  padding-top: $navHeight;
}

.heardBox {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: #fff;
}

.nav {
  max-width: 1400px;
  min-width: 1200px;
  height: $navHeight;
  line-height: $navHeight;
  margin: 0 auto;
  display: flex;
  .logo {
    margin-top: -5px;
    width: 250px;
    height: $navHeight;
    background: url("../public/img/logo/img1721517091251ef0.png");
    background-size: 100% 100%;
  }
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-around;
    flex-grow: 1;
    color: #6c6c6c;
    font-size: 20px;
    li {
      margin-right: 10px;
      min-width: 84.285px;
      text-align: center;
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
      &:hover {
        color: #1d2f70;
        font-weight: 600;
      }
    }
  }
  .search {
    min-width: 300px;
    text-align: center;
    .el-input {
      width: 200px !important;
      .el-input__inner {
        height: 30px !important;
      }
    }
    .searchBtn {
      background: #1d2f70;
      border: #1d2f70;
      color: #fff;
      margin-left: 5px;
      &:hover {
        background: #7d99e2;
      }
    }
  }
  .LoginBtn {
    display: flex;
    cursor: pointer;
    min-width: 120px;
    .headimg {
      padding-top: 11px;
    }
    .login {
      margin-left: 5px;
      font-size: 15px;
    }
    .register {
      margin-left: 8px;
      font-size: 15px;
    }
  }
}

.mainBox {
  width: 100%;
  padding: 10px 10px 80px 10px;
  max-width: 1400px;
  min-width: 1200px;
  margin: 0 auto;
}

//选中样式
.selectHeadNav {
  color: #1d2f70;
  font-weight: 600;
}

//全局样式
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.seachTabs {
  .el-tabs__item {
    font-size: 16px !important;
    color: #7e7c7c;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .el-tabs__item.is-active {
    color: #0c31b6;
  }
  .el-tabs__active-bar {
    background-color: #1d2f70;
  }
}
</style>
